<script>
import {h, ref,inject, defineComponent} from "vue";
import studentCommunal from "@/components/communal/student-communal.vue";
import {RouterLink} from "vue-router";
import {BookOutline as BookIcon,
  CashOutline as CashIcon,
  PencilSharp as pencilIcon,
  CreateOutline as createIcon
} from "@vicons/ionicons5";
import {NIcon} from "naive-ui";
export default defineComponent({
  name: "note-communal",
  props:{
    actionKey:{
      type:String
    },
    core: {
      type: Boolean,
      default: true
    }
  },
  components:{studentCommunal,BookIcon,CashIcon,pencilIcon,createIcon},
  setup(){
    const {toPage} = inject('toPage')
    function renderIcon(icon) {
      return () => h(NIcon, null, { default: () => h(icon) });
    }
    const menuOptions = [
      {
        label: () => h(
            RouterLink,
            {
              to: {
                name: "std/note",
              }
            },
            { default: () => "笔记首页" }
        ),
        key: "note-home",
        icon: renderIcon(BookIcon)
      },
      {
        label: () => h(
            RouterLink,
            {
              to: {
                name: "std/note/persona",
              }
            },
            { default: () => "个人笔记" }
        ),
        key: "note-persona",
        icon: renderIcon(BookIcon)
      },
      {
        label: () => h(
            RouterLink,
            {
              to: {
                name: "std/note/course",
              }
            },
            { default: () => "课程笔记" }
        ),
        key: "note-course",
        icon: renderIcon(BookIcon)
      }
    ]
    return{
      toPage,
      menuOption: ref(menuOptions)
    }
  }

})
</script>

<template>
  <student-communal :option="menuOption" action="note" :nav-key="actionKey" :core="core">
    <slot/>
    <template #float>
      <n-float-button position="relative" type="primary" menu-trigger="hover">
          <n-icon>
            <pencil-icon />
          </n-icon>
          <template #menu>
            <n-float-button>
              <n-icon>
                <createIcon @click="toPage('std/note/write', {isCreateNote: true})"/>
              </n-icon>
            </n-float-button>
<!--            <n-float-button>-->
<!--              <n-icon>-->
<!--                <cash-icon />-->
<!--              </n-icon>-->
<!--            </n-float-button>-->
<!--            <n-float-button>-->
<!--              <n-icon>-->
<!--                <cash-icon />-->
<!--              </n-icon>-->
<!--            </n-float-button>-->
          </template>
        </n-float-button>
    </template>
  </student-communal>
</template>

<style scoped>

</style>
